<template>
    <div class="propertyList">
       <div>
           <Form :model="formItem" ref="formItem" :label-width="50" inline>
              <Form-item label="省份:">
                  <Select
                     v-model="formItem.provinceCode"
                     filterable
                     clearable
                     remote
                     placeholder="请选择省份"
                     style="width:120px"
                     @on-change="getAreacode(3,formItem.provinceCode,'cityList')"
                   >
                  <Option v-for="(option, index) in provinceList" :value="option.cityCode"  :key="index">{{option.cityName}}</Option>
                </Select>
              </Form-item>
              <Form-item label="城市:">
                  <Select
                     v-model="formItem.cityCode"
                     filterable
                     remote
                     placeholder="请选择城市"
                     style="width:120px"
                     @on-change="getAreacode(4,formItem.cityCode,'districtList')"
                   >
                  <Option v-for="(option, index) in cityList" :value="option.cityCode" :key="index">{{option.cityName}}</Option>
                 </Select>
              </Form-item>
              <Form-item label="区县:">
                  <Select
                     v-model="formItem.areaCode"
                     filterable
                     remote
                     placeholder="请选择区县"
                     style="width:120px"
                     @on-change="getAreacode(5,formItem.areaCode,'moduleList')"
                   >
                  <Option v-for="(option, index) in districtList" :value="option.cityCode" :key="index">{{option.cityName}}</Option>
                 </Select>
              </Form-item>
              <Form-item label="模块:">
                  <Select
                     v-model="formItem.streetCode"
                     filterable
                     remote
                     placeholder="请选择模块"
                     style="width:140px"
                   >
                  <Option v-for="(option, index) in moduleList" :value="option.streetCode" :key="index">{{option.streetName}}</Option>
                </Select>
              </Form-item>
              <Form-item label="销售状态:" :label-width="80">
                  <Select
                     v-model="formItem.salesStatus"
                     filterable
                     remote
                     placeholder="请选择销售状态"
                     style="width:130px"
                   >
                  <Option v-for="(option, index) in sellStatusList" :value="option.key" :key="index">{{option.value[0]}}</Option>
                </Select>
              </Form-item><br />
              <Form-item :label-width="0">
                  <AutoComplete
                  v-model="formItem.buildingName"
                  placeholder="请输入要搜索的楼盘"
                  @on-search="remoteMethod1"
                  style="width:200px">
                    <Option v-for="(option, index) in buildNameList"  :value="option.buildingAlias" :key="index">{{option.buildingAlias}} &nbsp;&nbsp;<span style="float: right;">{{option.cityArea}}</span></Option>
                  </AutoComplete>
              </Form-item>
              <Form-item class="ml0">
                   <Button type="primary" @click="submit('formItem')">查询</Button>
                  <Button type="error" @click="handleReset('formItem')" style="margin-left: 8px">重置</Button>
              </Form-item>
          </Form>
       </div>
    </div>
</template>
<script>
import {getCityList, getBatchchcreate, getBatchcreate} from '@/api/buildingCheckcenter'
import {getNewBuildingInfoList} from '@/api/building'
  export default {
      props:{
        level:{
            type:String,
            default:"1"
        }
      },
      data(){
          return{
              formItem:{
                provinceCode:'',
                cityCode:'',
                areaCode:'',
                streetCode:'',
                salesStatus:'',
                buildingName:'',
                buildingId:''
              },
              provinceList:[],
              cityList:[],
              districtList:[],
              moduleList:[],
              sellStatusList:this.$formatter.cache.salesStatus || [],
              loading1:false,
              buildNameList:[],
          }
      },
      methods:{
          submit() {
           let obj = {};
           Object.keys(this.formItem).forEach(item=>{
             this.formItem[item] && (obj[item] = this.formItem[item])
           })
           console.log(obj)
           this.$emit("getBuildingInfoList1",obj)
          },
          handleReset (name) {
              this.formItem = this.$tool.deepClone(this.cacheFilter);
              console.log(this.formItem)
          },
         init(){
          this.cacheFilter = JSON.parse(JSON.stringify(this.formItem));
         },
         initFormItem(){
            let routeInfo = this.$route.query||{},self=this;
            Object.keys(self.formItem).forEach(key=>{
              self.formItem[key]= routeInfo[key]||'';
            })
            this.submit();
         },
         getAreacode(level=2,num,name){
           console.log("发生了请求",num)
             if(level !=2 && !num)return;
             //层级(1:国 2:省 3:市 4:区)
          if(level == 4)this.cityId = this.cityList.filter(item=>item.cityCode == num)[0].cityId
           if(level < 5){
             let params = {level,parentCode:num,rows:100}
             getCityList(params).then(res=>{
              this[name] = res.list;
              console.log('获取列表城市',res)
             })  
           }else{
            getBatchcreate({parentCode: num,cityId:this.cityId,rows:100}).then(res=>{
              this[name] = res.list
             console.log("板块信息", res)
            }) 
           }
           
          },
          //楼盘模糊查询
          remoteMethod1(query){
              this.formItem.id = '';
              if (query !== '') {
                  this.loading1 = true;
                  let params = {
                      buildingAlias:query,
                      page:1,
                      rows:50
                  }
                  getNewBuildingInfoList(params).then(res=>{
                      this.loading1 = false
                      res.list && res.list.length>0?this.buildNameList = res.list:this.buildNameList =[];
                      console.log('buildNameList',this.buildNameList)
                  })
            }
       }
      },
      created(){
          console.log(this.$formatter)
         this.init();
        this.getAreacode(2,'','provinceList');
      },

  }
  </script>
  <style lang="scss" scoped>
    /deep/.ivu-auto-complete.ivu-select-dropdown{
       max-height: 200px;
    }
  </style>
